page-signup {
    ion-spinner {
        margin: 20px auto;
    }
    .calendar {
        padding-bottom: 16px;
        background: #ff5722;
        overflow: hidden;
        .month {
            text-align: center;
            font-size: 18px;
            margin: 2rem;
            color: #fff;
        }
        .day {
            height: 68px;
            color: #fff;
            display: flex;
            overflow-x: scroll;
            flex-flow: row nowrap;
            border-top: 0.55px solid #ff9800;
            border-bottom: 0.55px solid #ff9800;
            background: #db4110;
            &::-webkit-scrollbar {
                display: none;
            }
            .day-item {
                text-align: center;
                padding: 8px;
                flex: 1 0 auto;
                transition: all 0.35s ease-in-out;
                -webkit-transition: all 0.35s ease-in-out;
                .day-of-week {
                    font-size: 12px;
                    margin: 4px 0 8px;
                }
                .day-num {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    line-height: 24px;
                }
            }
        }
        .sign-desc {
            text-align: center;
            p {
                font-size: 12px;
                color: #fff;
                display: block;
            }
        }
    }
    .today {
        color: #ff5722;
        border-radius: 50%;
        background: #fff;
    }
    .signed {
        color: #333 !important;
        background: #fff !important;
    }
    .complete {
        background: #ff9800;
    }
    .rule {
        padding: 3rem 1.5rem;
        .r-title {
            text-align: center;
            margin-bottom: 2rem;
        }
        ul {
            color: #afafaf;
            font-size: 12px;
            padding-left: 2rem;
        }
    }
}